<template>
  <div
    class="cell"
    @click="chooseSwitch"
    :style="{
      color: color,
      backgroundColor: backgroundColor,
      width: width + 'px',
      height: height + 'px',
      left: left + 'px',
      top: top + 'px'
    }"
  >
    <span
      class="key-code"
      :style="{ color: color, backgroundColor: backgroundColor}"
      :class="{hide: !showKeyCode}"
      >{{ keyCode }}</span
    >
    <span
      class="key-switch"
      :style="{ color: color, backgroundColor: backgroundColor }"
    >{{switchName}}</span>
  </div>
</template>
<script>
export default {
  name: "key-cell",
  props: {
    keyCode: String,
    backgroundColor: String,
    color: String,
    switchName: String,
    id: Number,
    left: Number,
    showKeyCode: Boolean,
    height: {
      type: Number,
      default: 80,
    },
    width: {
      type: Number,
      default: 80,
    },
    top: {
      type: Number,
      default: 0
    }
  },
  methods: {
    chooseSwitch(){
      this.$emit("chooseSwitch", this.id);
    }
  }
};
</script>
<style lang="stylus" scoped>
.cell {
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  padding-top: 5px;
  position: absolute;
  border: 2px solid #333;
  cursor: pointer;
  display: inline-block;
  .key-code{
    display: block;
    &.hide{
      display: none;
    }
  }
  .key-switch{
    display: block;
  }

  &:hover {
    border: 4px solid red;
  }
}
</style>